<template>
  <div class="board-column">
    <draggable :list="list" :rolVal="rolVal" v-bind="$attrs" :disabled="disabled" class="board-column-content"
      :set-data="setData">
      <div v-for="(x, index) in list" :key="index" :hoverable="false" @click="childMethod(x)" class="wode-wh">
        <img :src="x.iconBase64" class="img-wh" />
        <div class="titlehover">{{ x.appName }}{{ x.name }}</div>
      </div>

      <!-- <div v-for="(x, index) in list" :key="index" :hoverable="false" v-show="rolVal == 2" class="wode-wh"
        @click="childMethod(x)">

        <img v-if="!x.id" :src="`../../img/assets/quickApp/${x.icon}`" class="img-wh" />

        <img v-else :src="x.iconBase64" class="img-wh" />

        <div class="titlehover">{{
          x.appName }}{{ x.name }}</div>
      </div> -->
    </draggable>
 
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DragKanbanDemo',
  components: {
    draggable
  },
  props: {
    rolVal: {
      type: Number,
      default: 1
    },
    headerText: {
      type: String,
      default: 'Header'
    },
    disabled: {
      type: Boolean,
      default: true
    },
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  mounted() {
  },
  methods: {
    childMethod(val) {
      if (val.isRouter) {
        if (val.isRouter == 0) {
          this.$emit('GoUrl', val)
        }
      } else {//跳转url
        this.$emit('GoUrl', val) //调用父组件方法
      }
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    }
  }
}
</script>
<style lang="less" scoped>
.board-column {
  min-width: 100%;
  min-height: 100px;
  /* height: auto; */
  /* overflow: hidden; */
  /* background: #f0f0f0; */
  border-radius: 3px;
}

.board-column-header {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  padding: 0 20px;
  text-align: center;
  background: #333;
  color: #fff;
  border-radius: 3px 3px 0 0;
}

.board-column-content {
  /* height: auto; */
  /*background-color: red;*/
  /* overflow: hidden; */
  /* border: 10px solid transparent; */
  min-height: 58px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: flex-start;
  flex-direction: column; */
  /*align-items: center; */
}

.board-item {
  cursor: pointer;
  width: 100%;
  max-width: 200px;
  height: 64px;
  margin: 5px 20px;
  display: inline-block;
  /* background-color: #fff; */
  text-align: left;
  line-height: 54px;
  padding: 5px 10px;
  box-sizing: border-box;
  box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
}

/* .ant-card-grid:last-child { border-bottom:1px solid #1D60FF; } */
.lastmarginbottom :last-child {
  margin-bottom: 6px
}


.wode-wh {
  min-width: 25%;
  /* width: 20%; */
  /* flex-grow: 1; */
  cursor: pointer;
  /* display: flex;
  justify-content: space-evenly;
  flex-direction: column;*/
  align-items: center;
  box-sizing: border-box;
}

.img-wh {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

.titlehover {
  height: 50px;
  /*min-width: 100%;*/
  width: 120px;
  margin: 8px auto;
  word-break: break-all;
  text-align: center;
  font-size: 13px;
  color: #4E5969;

}

.titlehover:hover {
  /* color: #1D60FF !important; */
  color: #ff4d4f !important;
}

.myapp-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;

  .myapp-selection {
    width: 20%;
    min-width: 230px;
    height: 100px;
    padding: 10px;
    //flex-grow: 1;
    box-sizing: border-box;

    .myapp-selection-center {
      position: relative;
      display: block;
      height: 100%;
      border-radius: 6px;
      border: 1px solid #e2e2e2;

      img {
        position: absolute;
        left: 16px;
        top: 16px;
        width: 48px;
        height: 48px;
      }

      span {
        display: inline-block;
        position: absolute;
        left: 80px;
        top: 18px;
        width: 50%;
        height: 44px;
        overflow: hidden;
      }

      input {
        outline: none;
        -webkit-appearance: none;
        -webkit-tab-highlight-color: rgba(0, 0, 0, 0);
        display: inline-block;
        position: absolute;
        width: 26px;
        height: 26px;
        right: 16px;
        top: 26px;
        text-align: center;
        vertical-align: baseline;
        line-height: 26px;
        border-radius: 50%;
        border: 1px solid #e2e2e2;
        color: #fff;
        background-color: #fff;
      }

      input[type="checkbox"]::before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        color: #fff;
        box-sizing: border-box;
      }

      input[type="checkbox"]:checked::before {
        content: "\2713";
        position: absolute;
        width: 26px;
        height: 26px;
        right: 0;
        top: 0;
        border: 1px solid #2acc95;
        color: #fff;
        font-size: 1.2rem;
        border-radius: 50%;
        background-color: #2acc95;
      }
    }
  }

}
</style>

